<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 标签管理 -->
        <el-form label-width="80px">
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <el-form-item label="关键字" prop="textCurr">
                <el-input
                  v-model="pageParams.tagName"
                  placeholder="根据文章标题搜索"
                  size="small"
                  style="width:190px"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态" prop="stateCurr">
                <el-select
                v-model="pageParams.state"
                  size="small"
                  style="width:190px"
                >
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item>
                <el-button size="small" @click="code">清除</el-button>
                <el-button size="small" type="primary" @click="searchValueChange">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>

                <el-row type="flex" justify="end">
                  <el-button type="text" v-if="$route.query.id" @click="$router.push('/subjects/list')" icon="el-icon-back"> 返回学科</el-button>
                    <el-button size="small" type="success" @click="addClickLabel(null)"><i class="el-icon-edit"></i> 新增技巧</el-button>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据提示 -->
        <el-tag
        type="info"
        style="width:100%">
        <i class="el-icon-info"></i>
        数据一共{{total}}条
        </el-tag>

        <!-- 展示表格 -->
        <el-table
        :data="depts"
        style="padding-top:15px;"
        :header-cell-style="styleBgcColor">

            <el-table-column
              type="index"
              label="序号"
              width="80"
              >
            </el-table-column>

            <el-table-column
              prop="subjectName"
              label="所属学科"
              width="200"
              >
            </el-table-column>

            <el-table-column
              prop="tagName"
              label="标签名称">
            </el-table-column>

            <el-table-column
              prop="username"
              label="创建者">
            </el-table-column>

            <el-table-column
              prop="addDate"
              label="创建日期">
            </el-table-column>

            <el-table-column
              prop="state"
              label="状态">
              <template #default="{row}">
                <span v-if="row.state===1">启用</span>
                <span v-else>已禁用</span>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="{row}">
                <el-button type="text" @click="forbiddenClick(row.id,row.state)">
                  <span v-if="row.state===1">禁用</span>
                  <span v-else>启用</span>
                </el-button>
                <el-button type="text" :disabled="row.state===1" @click="addClickLabel(row.id)">修改</el-button>
                <el-button type="text" :disabled="row.state===1" @click="open(row.id)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" style="padding-top:20px">
          <el-pagination
          background
          :current-page="pageParams.page"
          :page-sizes="[10,15,20]"
          :page-size="pageParams.pagesize"
          :total="this.total"
          @current-change="handlecurrChange"
          @size-change="handleChange"
          layout="prev, pager, next, sizes, jumper"

          >
        </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 弹层 -->
    <tags-add
        ref="tagsAdd"
        :show-dialog.sync="showDialog"
        :add-id='addId'
        :addlist="addList"
        @addDepatList="gitSubjectsList"
    ></tags-add>
  </div>
</template>

<script>
import { changeState, list, remove } from '../../api/hmmm/tags'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: { tagsAdd },
  data () {
    return {
      depts: [],
      pageParams: {
        page: 1, // 当前页
        pagesize: 10, // 每页记录条数
        state: null,
        tagName: ''
      },
      total: 0, // 记录总条数
      showDialog: false,
      addId: null,
      delId: null,
      addList: null
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.subjectName) {
      return this.gitSubjectsList()
    }
    this.getLabelList()
  },
  methods: {
    async gitSubjectsList () {
      const { data } = await list({
        ...this.pageParams,
        subjectID: this.$route.query.id
      })
      this.depts = data.items
      this.total = data.counts
      const dayjs = require('dayjs')
      this.depts.map(item => {
        item.addDate = dayjs(new Date(item.addDate)).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    // 删除按钮
    open (id) {
      this.delId = id
      console.log(this.delId)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async (id) => {
        await remove({ id: this.delId })
        // 友好提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 判断当前是否数据的最后一页，并且判断当前页是否是最后一条数据
        if (this.depts.length === 1 && this.pageParams.page > 1) {
          this.pageParams.page--
        }
        // 从新渲染页面
        this.getLabelList()
      })
    },
    // 修改+新增
    addClickLabel (id) {
      console.log(id)
      this.showDialog = true
      this.addId = id
      this.addList = this.$route.query.id
      this.$nextTick(() => {
        this.$refs.tagsAdd.getLableList()
        this.$refs.tagsAdd.getVoreData()
      })
    },
    // 监听到的搜索框
    searchValueChange () {
      this.getLabelList.page = 1
      this.gitSubjectsList()
    },
    // 清空表单
    code () {
      this.pageParams.tagName = ''
      this.pageParams.state = null
      this.gitSubjectsList()
      this.pageParams.page = 1
    },
    // 单击禁用按钮
    async forbiddenClick (id, state) {
      if (state === 1) { state = 0 } else if (state === 0) { state = 1 }
      await changeState({ id, state })
      this.gitSubjectsList()
    },
    // table表格，表头的背景色
    styleBgcColor () {
      return 'background-color:rgb(250,250,250)'
    },
    // 表格序号
    indexMethod (index) {
      return index + 1
    },
    // 每页条数时的方法
    handleChange (pageSize) {
      this.pageParams.pagesize = pageSize
      this.getLabelList()
    },
    // 当前页发送改变时的方法
    handlecurrChange (currentPage) {
      this.pageParams.page = currentPage
      this.getLabelList()
    },
    // 获取标签列表
    async getLabelList () {
      const res = await list(this.pageParams)
      console.log(res)
      this.depts = res.data.items
      this.total = res.data.counts
      const dayjs = require('dayjs')
      this.depts.map(item => {
        item.addDate = dayjs(new Date(item.addDate)).format('YYYY-MM-DD HH:mm:ss')
      })
    }
  }
}
</script>

<style scoped>
  /* body{
    display: inline-block;
  } */
</style>
